<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useRedisStore } from '@/stores/redis';
import { useUserStore } from '@/stores/user';
import { ElMessage } from 'element-plus';
import UserAvatar from '@/components/UserAvatar.vue';

const router = useRouter();
const redisStore = useRedisStore();
const userStore = useUserStore();

// 数据
const connected = ref(false);
const redisInfo = ref({});
const loading = ref(false);
const cacheKeys = ref([]);
const cacheValues = ref({}); // 存储缓存键值对
const searchKey = ref(''); // 搜索关键字
const selectedKeyType = ref('all'); // 过滤类型

// 数据库选择
const selectedDb = ref(0);
const dbOptions = ref([
  { label: 'DB0 (默认)', value: 0 },
  { label: 'DB1', value: 1 },
  { label: 'DB2', value: 2 },
  { label: 'DB3', value: 3 },
  { label: 'DB4', value: 4 },
  { label: 'DB5', value: 5 }
]);

// 缓存操作表单
const cacheForm = ref({
  key: '',
  value: ''
});

// 获取缓存表单
const getForm = ref({
  key: ''
});

// 删除缓存表单
const deleteForm = ref({
  key: ''
});

// 计数器表单
const counterForm = ref({
  key: 'page_view_counter',
  value: 0
});

// 测试Redis连接
const testConnection = async () => {
  loading.value = true;
  try {
    const result = await redisStore.testConnection();
    connected.value = redisStore.connected;
    if (connected.value) {
      ElMessage.success('Redis连接成功');
      fetchRedisInfo();
    } else {
      ElMessage.error('Redis连接失败');
    }
  } catch (error) {
    console.error('Redis连接测试失败:', error);
    ElMessage.error('Redis连接测试失败');
  } finally {
    loading.value = false;
  }
};

// 获取Redis信息
const fetchRedisInfo = async () => {
  loading.value = true;
  try {
    const info = await redisStore.fetchRedisInfo();
    redisInfo.value = info || {};
    connected.value = redisStore.connected;
    // 获取缓存键列表
    if (connected.value) {
      await loadCacheKeys();
    }
  } catch (error) {
    console.error('获取Redis信息失败:', error);
    ElMessage.error('获取Redis信息失败');
  } finally {
    loading.value = false;
  }
};

// 加载缓存键列表
const loadCacheKeys = async () => {
  try {
    const keys = await redisStore.getCacheKeys('*');
    cacheKeys.value = keys || [];
    // 预加载前20个键的值用于预览
    await loadCacheValues(keys.slice(0, 20));
  } catch (error) {
    console.error('获取缓存键失败:', error);
  }
};

// 加载缓存值
const loadCacheValues = async (keys) => {
  for (const key of keys) {
    try {
      const value = await redisStore.getStringCache(key);
      cacheValues.value[key] = value;
    } catch (error) {
      console.error(`获取键 ${key} 的值失败:`, error);
    }
  }
};

// 判断值的类型
const getValueType = (value) => {
  if (value === null || value === undefined) return 'null';
  if (typeof value === 'number') return 'number';
  if (typeof value === 'boolean') return 'boolean';
  
  try {
    JSON.parse(value);
    return 'json';
  } catch {
    return 'string';
  }
};

// 格式化显示值
const formatValue = (value) => {
  if (value === null || value === undefined) return 'null';
  
  const type = getValueType(value);
  if (type === 'json') {
    try {
      return JSON.stringify(JSON.parse(value), null, 2);
    } catch {
      return value;
    }
  }
  return value;
};

// 过滤缓存键
const filteredCacheKeys = computed(() => {
  let keys = cacheKeys.value;
  
  // 按搜索关键字过滤
  if (searchKey.value) {
    keys = keys.filter(key => 
      key.toLowerCase().includes(searchKey.value.toLowerCase())
    );
  }
  
  // 按类型过滤
  if (selectedKeyType.value !== 'all') {
    keys = keys.filter(key => {
      const value = cacheValues.value[key];
      return getValueType(value) === selectedKeyType.value;
    });
  }
  
  return keys;
});

// 设置缓存 - 使用字符串专用接口
const setCache = async () => {
  if (!cacheForm.value.key || !cacheForm.value.value) {
    ElMessage.warning('请输入键和值');
    return;
  }
  
  loading.value = true;
  try {
    const result = await redisStore.setStringCache(cacheForm.value.key, cacheForm.value.value);
    if (result) {
      ElMessage.success('设置字符串缓存成功');
      // 更新缓存键列表和值
      if (!cacheKeys.value.includes(cacheForm.value.key)) {
        cacheKeys.value.push(cacheForm.value.key);
      }
      cacheValues.value[cacheForm.value.key] = cacheForm.value.value;
      // 清空表单
      cacheForm.value.value = '';
    } else {
      ElMessage.error('设置缓存失败');
    }
  } catch (error) {
    console.error('设置缓存失败:', error);
    ElMessage.error('设置缓存失败');
  } finally {
    loading.value = false;
  }
};

// 获取缓存 - 使用字符串专用接口
const getCache = async () => {
  if (!getForm.value.key) {
    ElMessage.warning('请输入要获取的键');
    return;
  }
  
  loading.value = true;
  try {
    const value = await redisStore.getStringCache(getForm.value.key);
    if (value !== null && value !== undefined) {
      ElMessage.success(`获取字符串缓存成功: ${value}`);
      // 更新表单
      cacheForm.value.key = getForm.value.key;
      cacheForm.value.value = value;
      // 更新缓存键列表和值
      if (!cacheKeys.value.includes(getForm.value.key)) {
        cacheKeys.value.push(getForm.value.key);
      }
      cacheValues.value[getForm.value.key] = value;
    } else {
      ElMessage.warning('未找到对应的缓存值');
    }
  } catch (error) {
    console.error('获取缓存失败:', error);
    ElMessage.error('获取缓存失败');
  } finally {
    loading.value = false;
  }
};

// 删除缓存
const deleteCache = async () => {
  if (!deleteForm.value.key) {
    ElMessage.warning('请输入要删除的键');
    return;
  }
  
  loading.value = true;
  try {
    const result = await redisStore.removeCacheValue(deleteForm.value.key);
    if (result) {
      ElMessage.success('删除缓存成功');
      // 更新缓存键列表和值
      cacheKeys.value = cacheKeys.value.filter(key => key !== deleteForm.value.key);
      delete cacheValues.value[deleteForm.value.key];
      // 清空表单
      deleteForm.value.key = '';
    } else {
      ElMessage.warning('未找到对应的缓存键');
    }
  } catch (error) {
    console.error('删除缓存失败:', error);
    ElMessage.error('删除缓存失败');
  } finally {
    loading.value = false;
  }
};

// 设置计数器缓存
const setCounter = async () => {
  if (!counterForm.value.key) {
    ElMessage.warning('请输入计数器键');
    return;
  }
  
  // 确保值是整数
  const intValue = parseInt(counterForm.value.value) || 0;
  
  loading.value = true;
  try {
    // 使用普通的setCache方法，传递字符串值
    const result = await redisStore.setCache(counterForm.value.key, intValue.toString());
    if (result) {
      ElMessage.success(`设置计数器成功: ${intValue}`);
      // 更新缓存键列表
      if (!cacheKeys.value.includes(counterForm.value.key)) {
        cacheKeys.value.push(counterForm.value.key);
      }
    } else {
      ElMessage.error('设置计数器失败');
    }
  } catch (error) {
    console.error('设置计数器失败:', error);
    ElMessage.error(`设置计数器失败: ${error.message || '未知错误'}`);
  } finally {
    loading.value = false;
  }
};

// 递增计数器
const incrementCounter = async () => {
  if (!counterForm.value.key) {
    ElMessage.warning('请输入计数器键');
    return;
  }
  
  loading.value = true;
  try {
    // 先获取当前值
    const currentValue = await redisStore.getCache(counterForm.value.key);
    let newValue = 1;
    if (currentValue !== null && currentValue !== undefined) {
      const intValue = parseInt(currentValue);
      newValue = isNaN(intValue) ? 1 : intValue + 1;
    }
    
    // 设置新值
    const result = await redisStore.setCache(counterForm.value.key, newValue.toString());
    if (result) {
      ElMessage.success(`计数器递增成功: ${newValue}`);
      counterForm.value.value = newValue;
      // 更新缓存键列表
      if (!cacheKeys.value.includes(counterForm.value.key)) {
        cacheKeys.value.push(counterForm.value.key);
      }
    } else {
      ElMessage.error('计数器递增失败');
    }
  } catch (error) {
    console.error('计数器递增失败:', error);
    ElMessage.error(`计数器递增失败: ${error.message || '未知错误'}`);
  } finally {
    loading.value = false;
  }
};

// 选择缓存键
const selectCacheKey = (key) => {
  getForm.value.key = key;
  deleteForm.value.key = key;
  cacheForm.value.key = key;
  counterForm.value.key = key;
  // 如果没有加载过这个键的值，则加载它
  if (cacheValues.value[key] === undefined) {
    loadCacheValues([key]);
  }
};

// 直接获取缓存（用于键列表中的查看按钮）
const getCacheByKey = async (key) => {
  loading.value = true;
  try {
    const value = await redisStore.getStringCache(key);
    if (value !== null && value !== undefined) {
      cacheValues.value[key] = value;
      cacheForm.value.key = key;
      cacheForm.value.value = value;
      ElMessage.success(`获取缓存成功: ${key}`);
    } else {
      ElMessage.warning('未找到对应的缓存值');
    }
  } catch (error) {
    console.error('获取缓存失败:', error);
    ElMessage.error('获取缓存失败');
  } finally {
    loading.value = false;
  }
};

// 直接删除缓存（用于键列表中的删除按钮）
const deleteCacheByKey = async (key) => {
  loading.value = true;
  try {
    const result = await redisStore.removeCacheValue(key);
    if (result) {
      ElMessage.success('删除缓存成功');
      cacheKeys.value = cacheKeys.value.filter(k => k !== key);
      delete cacheValues.value[key];
    } else {
      ElMessage.warning('未找到对应的缓存键');
    }
  } catch (error) {
    console.error('删除缓存失败:', error);
    ElMessage.error('删除缓存失败');
  } finally {
    loading.value = false;
  }
};

// 判断是否为集群模式
const isClusterMode = (redisData) => {
  if (!redisData || !redisData.mode) return false;
  return redisData.mode.includes('集群') || 
         redisData.mode.toLowerCase().includes('cluster');
};

// 获取显示版本信息 - 兼容集群和单机
const getDisplayVersion = (redisData) => {
  if (redisData.version && redisData.version !== '未知') {
    return redisData.version;
  }
  
  const isCluster = isClusterMode(redisData);
  if (isCluster) {
    return redisData.clusterVersion || '7.0+ 集群版';
  } else {
    return redisData.standaloneVersion || '7.0+ 单机版';
  }
};

// 获取显示内存信息 - 兼容集群和单机
const getDisplayMemory = (redisData) => {
  if (redisData.memory && redisData.memory !== '未知') {
    return redisData.memory;
  }
  
  const isCluster = isClusterMode(redisData);
  if (isCluster) {
    // 集群模式可能返回总内存或各节点内存
    return redisData.totalMemory || 
           redisData.clusterMemory || 
           redisData.usedMemoryTotal || 
           '集群总内存';
  } else {
    // 单机模式返回单个实例内存
    return redisData.usedMemory || 
           redisData.memoryUsage || 
           '128MB';
  }
};

onMounted(() => {
  // 初始化用户信息
  userStore.initUserInfo();
  
  // 检查是否有有效的token和用户信息
  const currentUser = userStore.getCurrentUsername();
  const token = localStorage.getItem('token');
  if (!token || currentUser === '未知用户') {
    console.warn('检测到无效会话，自动登出');
    userStore.logout().then(() => {
      router.push('/login');
    });
    return;
  }
  
  // 测试连接
  testConnection();
});
</script>

<template>
  <div class="redis-manager-container">
    <div class="page-header">
      <div class="header-left">
        <h1>Redis管理</h1>
      </div>
      <div class="header-right">
        <UserAvatar />
      </div>
    </div>
    
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="connection-card">
          <template #header>
            <div class="card-header">
              <h3>Redis连接状态</h3>
              <div class="header-actions">
                <el-select v-model="selectedDb" placeholder="选择数据库" style="width: 140px; margin-right: 10px;">
                  <el-option
                    v-for="item in dbOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-button type="primary" @click="testConnection" :loading="loading">测试连接</el-button>
              </div>
            </div>
          </template>
          <div v-loading="loading" class="connection-status">
            <el-alert
              :title="connected ? 'Redis连接正常' : 'Redis未连接'"
              :type="connected ? 'success' : 'error'"
              :description="connected ? '可以正常进行缓存操作' : '请检查Redis服务是否启动'"
              show-icon
              :closable="false"
            />
            
            <div v-if="connected && redisInfo" class="redis-info">
              <h4>Redis集群信息</h4>
              <el-row :gutter="16">
                <el-col :span="6">
                  <el-card class="info-card memory-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-pie-chart"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">内存使用</div>
                        <div class="info-value">{{ getDisplayMemory(redisInfo) }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="info-card total-memory-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-data-analysis"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">集群总内存</div>
                        <div class="info-value">{{ redisInfo.totalMemory || redisInfo.maxMemory || '2GB' }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="info-card connections-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-connection"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">连接数</div>
                        <div class="info-value">{{ redisInfo.connections || redisInfo.connectedClients || '0' }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="6">
                  <el-card class="info-card status-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-success"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">集群状态</div>
                        <div class="info-value status-normal">{{ redisInfo.clusterState || '正常' }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="16" style="margin-top: 16px;">
                <el-col :span="8">
                  <el-card class="info-card version-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-info"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">版本</div>
                        <div class="info-value">{{ getDisplayVersion(redisInfo) }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="info-card mode-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-setting"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">模式</div>
                        <div class="info-value">
                          <el-tag :type="isClusterMode(redisInfo) ? 'warning' : 'success'">
                            {{ redisInfo.mode || 'standalone' }}
                          </el-tag>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="info-card nodes-card">
                    <div class="info-content">
                      <div class="info-icon">
                        <i class="el-icon-coordinate"></i>
                      </div>
                      <div class="info-text">
                        <div class="info-title">节点数</div>
                        <div class="info-value">{{ redisInfo.clusterNodes || redisInfo.nodeCount || '未知' }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 左列：设置和删除缓存 -->
      <el-col :span="12">
        <el-card shadow="hover" class="cache-card">
          <template #header>
            <div class="card-header">
              <h3>设置缓存</h3>
            </div>
          </template>
          <div v-loading="loading" class="cache-form">
            <el-form :model="cacheForm" label-width="80px">
              <el-form-item label="缓存键">
                <el-input v-model="cacheForm.key" placeholder="请输入缓存键" />
              </el-form-item>
              <el-form-item label="缓存值">
                <el-input v-model="cacheForm.value" placeholder="请输入缓存值" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="setCache" :disabled="!connected">设置缓存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        
        <el-card shadow="hover" class="cache-card" style="margin-top: 20px;">
          <template #header>
            <div class="card-header">
              <h3>删除缓存</h3>
            </div>
          </template>
          <div v-loading="loading" class="cache-form">
            <el-form :model="deleteForm" label-width="80px">
              <el-form-item label="缓存键">
                <el-input v-model="deleteForm.key" placeholder="请输入缓存键" />
              </el-form-item>
              <el-form-item>
                <el-button type="danger" @click="deleteCache" :disabled="!connected">删除缓存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右列：获取缓存和缓存键列表 -->
      <el-col :span="12">
        <el-card shadow="hover" class="cache-card">
          <template #header>
            <div class="card-header">
              <h3>获取缓存</h3>
            </div>
          </template>
          <div v-loading="loading" class="cache-form">
            <el-form :model="getForm" label-width="80px">
              <el-form-item label="缓存键">
                <el-input v-model="getForm.key" placeholder="请输入缓存键" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getCache" :disabled="!connected">获取缓存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        
        <el-card shadow="hover" style="margin-top: 20px;">
          <template #header>
            <div class="card-header">
              <h3>缓存键列表 ({{ filteredCacheKeys.length }})</h3>
              <div class="header-actions">
                <el-input
                  v-model="searchKey"
                  placeholder="搜索缓存键"
                  prefix-icon="el-icon-search"
                  style="width: 150px; margin-right: 8px;"
                  size="small"
                  clearable
                />
                <el-select v-model="selectedKeyType" placeholder="类型" style="width: 80px; margin-right: 8px;" size="small">
                  <el-option label="全部" value="all" />
                  <el-option label="字符" value="string" />
                  <el-option label="数字" value="number" />
                  <el-option label="JSON" value="json" />
                </el-select>
                <el-button type="primary" @click="loadCacheKeys" :loading="loading" size="small">
                  <i class="el-icon-refresh"></i>
                </el-button>
              </div>
            </div>
          </template>
          <div class="cache-keys-container" style="max-height: 300px; overflow-y: auto;">
            <el-empty v-if="filteredCacheKeys.length === 0" description="暂无缓存键" />
            <div v-else class="cache-keys-list">
              <div
                v-for="key in filteredCacheKeys.slice(0, 10)"
                :key="key"
                class="cache-key-item-compact"
                @click="selectCacheKey(key)">
                <div class="key-header-compact">
                  <span class="key-name-compact">{{ key }}</span>
                  <el-tag
                    :type="getValueType(cacheValues[key]) === 'json' ? 'warning' : 
                           getValueType(cacheValues[key]) === 'number' ? 'success' : 'primary'"
                    size="mini">
                    {{ getValueType(cacheValues[key]).toUpperCase() }}
                  </el-tag>
                </div>
                <div class="key-value-compact" v-if="cacheValues[key] !== undefined">
                  <span class="value-preview">{{ String(cacheValues[key]).substring(0, 30) }}{{ String(cacheValues[key]).length > 30 ? '...' : '' }}</span>
                </div>
                <div class="key-actions-compact">
                  <el-button type="text" size="mini" @click.stop="getCacheByKey(key)">查看</el-button>
                  <el-button type="text" size="mini" @click.stop="deleteCacheByKey(key)" class="delete-btn">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover" class="cache-card">
          <template #header>
            <div class="card-header">
              <h3>计数器缓存</h3>
            </div>
          </template>
          <div v-loading="loading" class="cache-form">
            <el-form :model="counterForm" label-width="80px">
              <el-form-item label="计数器键">
                <el-input v-model="counterForm.key" placeholder="请输入计数器键" />
              </el-form-item>
              <el-form-item label="初始值">
                <el-input-number 
                  v-model="counterForm.value" 
                  :min="0" 
                  :step="1" 
                  placeholder="请输入初始值" 
                  style="width: 100%;" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="setCounter" :disabled="!connected">设置计数器</el-button>
                <el-button type="success" @click="incrementCounter" :disabled="!connected">递增计数器</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 详细缓存键列表（在底部展示） -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <h3>详细缓存信息 ({{ filteredCacheKeys.length }})</h3>
              <div class="header-actions">
                <el-input
                  v-model="searchKey"
                  placeholder="搜索缓存键"
                  prefix-icon="el-icon-search"
                  style="width: 200px; margin-right: 10px;"
                  clearable
                />
                <el-select v-model="selectedKeyType" placeholder="类型过滤" style="width: 120px; margin-right: 10px;">
                  <el-option label="全部" value="all" />
                  <el-option label="字符串" value="string" />
                  <el-option label="数字" value="number" />
                  <el-option label="JSON" value="json" />
                  <el-option label="空值" value="null" />
                </el-select>
                <el-button type="primary" @click="loadCacheKeys" :loading="loading" size="small">
                  <i class="el-icon-refresh"></i> 刷新
                </el-button>
              </div>
            </div>
          </template>
          <div class="cache-keys-container">
            <el-empty v-if="filteredCacheKeys.length === 0" description="暂无缓存键" />
            <div v-else class="cache-keys-list">
              <div
                v-for="key in filteredCacheKeys"
                :key="key"
                class="cache-key-item"
                @click="selectCacheKey(key)">
                <div class="key-header">
                  <span class="key-name">{{ key }}</span>
                  <el-tag
                    :type="getValueType(cacheValues[key]) === 'json' ? 'warning' : 
                           getValueType(cacheValues[key]) === 'number' ? 'success' : 
                           getValueType(cacheValues[key]) === 'null' ? 'info' : 'primary'"
                    size="small">
                    {{ getValueType(cacheValues[key]).toUpperCase() }}
                  </el-tag>
                </div>
                <div class="key-value" v-if="cacheValues[key] !== undefined">
                  <pre v-if="getValueType(cacheValues[key]) === 'json'" class="json-preview">{{ formatValue(cacheValues[key]) }}</pre>
                  <span v-else-if="getValueType(cacheValues[key]) === 'number'" class="number-preview">{{ cacheValues[key] }}</span>
                  <span v-else-if="getValueType(cacheValues[key]) === 'null'" class="null-preview">null</span>
                  <span v-else class="string-preview">{{ cacheValues[key] }}</span>
                </div>
                <div class="key-actions">
                  <el-button type="text" size="small" @click.stop="getCacheByKey(key)">查看</el-button>
                  <el-button type="text" size="small" @click.stop="deleteCacheByKey(key)" class="delete-btn">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.redis-manager-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 12px;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.header-left h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.header-right {
  display: flex;
  align-items: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.connection-status {
  padding: 10px 0;
}

.redis-info {
  margin-top: 20px;
}

/* Redis信息卡片样式 */
.info-card {
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.info-content {
  display: flex;
  align-items: center;
  padding: 16px;
}

.info-icon {
  font-size: 32px;
  margin-right: 16px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.memory-card .info-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.total-memory-card .info-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.connections-card .info-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.status-card .info-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.version-card .info-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
}

.mode-card .info-icon {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #333;
}

.nodes-card .info-icon {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #333;
}

.info-text {
  flex: 1;
}

.info-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
}

.info-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.status-normal {
  color: #67c23a;
}

/* 缓存键列表样式 */
.cache-keys-container {
  min-height: 200px;
  padding: 16px 0;
}

.cache-keys-list {
  display: grid;
  gap: 12px;
}

.cache-key-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cache-key-item:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-1px);
}

.key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.key-name {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
}

.key-value {
  margin: 12px 0;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.json-preview {
  background: #2d3748;
  color: #e2e8f0;
  padding: 12px;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
  overflow-x: auto;
  border-left: 4px solid #f6ad55;
}

.number-preview {
  color: #38a169;
  font-weight: 600;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 16px;
}

.string-preview {
  color: #2d3748;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  word-break: break-all;
}

.null-preview {
  color: #a0aec0;
  font-style: italic;
  font-weight: 500;
}

.key-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.delete-btn {
  color: #f56c6c !important;
}

.delete-btn:hover {
  background-color: #fef0f0 !important;
}

/* 紧凑型缓存键项样式 */
.cache-key-item-compact {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px 12px;
  background: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
  margin-bottom: 8px;
}

.cache-key-item-compact:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.key-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.key-name-compact {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
  flex: 1;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-value-compact {
  margin: 4px 0;
  font-size: 12px;
  color: #606266;
}

.value-preview {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.key-actions-compact {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.cache-form {
  padding: 10px 0;
}

.cache-keys {
  min-height: 100px;
  padding: 10px 0;
}

.cache-key-tag {
  margin: 5px;
  cursor: pointer;
}

h1 {
  margin-bottom: 20px;
  color: #303133;
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .redis-manager-container {
    padding: 16px;
  }
  
  h1 {
    font-size: 24px;
    text-align: center;
  }
  
  .card-header h3 {
    font-size: 16px;
  }
  
  .cache-form {
    padding: 8px 0;
  }
  
  :deep(.el-form-item__label) {
    font-size: 14px;
  }
  
  :deep(.el-input__inner) {
    font-size: 14px;
  }
  
  :deep(.el-button) {
    width: 100%;
    margin-top: 8px;
  }
  
  .cache-key-tag {
    margin: 3px;
    font-size: 12px;
  }
  
  :deep(.el-card__body) {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .redis-manager-container {
    padding: 12px;
  }
  
  h1 {
    font-size: 20px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .card-header h3 {
    font-size: 14px;
  }
  
  :deep(.el-form-item__label) {
    width: 100% !important;
    text-align: left;
    margin-bottom: 4px;
  }
  
  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
  
  :deep(.el-card__body) {
    padding: 12px;
  }
  
  .cache-keys {
    min-height: 80px;
  }
}
</style>
